/*
* @Description:可视化-通道区块比
* @Author: lil
* @Date: 2021/11/29
**/
<template>
  <div class="channelBlockPieChart">
    <div id="channelBlockPieChart" style="width:378px;height:240px"></div>
  </div>
</template>
<script>
  import {
    channelBlockInfo
  } from '@/api/blockchain/blockchainvisualization'
  export default {
    data() {
      return {
        myChart: ''
      };
    },
    mounted() {
      this.getChannelBlockInfo("all");
      this.drawLine();
    },
    methods: {
      getChannelBlockInfo(date) {
        channelBlockInfo(date).then((res) => {
          var channelData = [];
          for (let i = res.data.length - 1; i >= 0; i--) {
            if (res.data[i].value == 0) {
              res.data.splice(i, 1);
            }
          }
          for (let i = 0; i < res.data.length; i++) {
            channelData.push({
              value: '',
              name: ''
            });
            channelData[i].value = res.data[i].value;
            channelData[i].name = res.data[i].channel;
          }
          this.myChart.setOption({
            series: [{
              data: channelData
            }]
          });
        }).catch((err) => {
          console.log(err);
        });
      },
      drawLine() {
        this.myChart = this.$echarts.init(document.getElementById('channelBlockPieChart'));
        let color1 = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: "#20a0ff"
        }, {
          offset: 1,
          color: "#ba21ff"
        }], false);
        let color2 = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: "#25d7d6"
        }, {
          offset: 1,
          color: "#299ef2"
        }], false);
        let color3 = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: "#4483fe"
        }, {
          offset: 1,
          color: "#579ffd"
        }], false);
        this.myChart.setOption({
          color: [color1, color2, color3],
          series: [{
            type: 'pie',
            radius: ['40%', '67%'],
            roseType: 'area',
            labelLine: {
              normal: {
                length: 20,
                lineStyle: {
                  color: "rgba(74,88,149,.8)",
                },
              }
            },
            label: {
              normal: {
                formatter(param) {
                  let name = param.name;
                  let percent = Math.round(param.percent);
                  return `{a|${percent}}{c|%}\n\n{b|${name}}`;
                },
                borderWidth: 20,
                borderRadius: 4,
                rich: {
                  a: {
                    fontSize: 19,
                    fontWeight: 'bold',
                    // fontFamily: 'uniFont',
                    align: 'center',
                    color: 'rgba(55,255,239,.8)',
                    lineHeight: 1
                  },
                  b: {
                    fontSize: 16,
                    align: 'center',
                    color: 'rgba(194,226,228,.8)',
                    lineHeight: 10
                  },
                  c: {
                    fontSize: 15,
                    align: 'center',
                    color: 'rgba(55,255,239,.8)',
                    lineHeight: 1
                  }
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
          }]
        });
        if (window.screen.width == 1680) {
          this.myChart.resize({
            width: '320px'
          });
        } else if (window.screen.width == 1600) {
          this.myChart.resize({
            width: '310px'
          });
          this.myChart.setOption({
            series: [{
              radius: ['35%', '62%'],
            }]
          })
        } else if (window.screen.width <= 1440) {
          this.myChart.resize({
            width: '265px'
          });
          this.myChart.setOption({
            series: [{
              radius: ['23%', '48%'],
              label: {
                normal: {
                  rich: {
                    a: {
                      fontSize: 18
                    },
                    b: {
                      fontSize: 14
                    },
                    c: {
                      fontSize: 13
                    }
                  }
                }
              }
            }]
          })
        }
      }
    },
  }

</script>
<style lang="scss" scoped>
  @font-face {
    font-family: uniFont;
    src: url('~@/assets/styles/fonts/UnidreamLED.ttf');
  }

  .channelBlockPieChart {
    background: url(~@/assets/image/ksh-pie3-bg.png) no-repeat;
    background-size: 215px 215px;
    background-position-x: 81px;
    background-position-y: 13px;
    margin-bottom: 20px;
    margin-top: 10px;
  }

  @media screen and (max-width:1680px) {
    .channelBlockPieChart {
      background-position-x: 53px;
    }
  }

  @media screen and (max-width:1600px) {
    .channelBlockPieChart {
      background-position-x: 62px;
      background-size: 185px 185px;
      background-position-y: 22px;
    }
  }

  @media screen and (max-width:1440px) {
    .channelBlockPieChart {
      background-position-x: 60px;
      background-size: 150px 150px;
      background-position-y: 38px;
    }
  }

</style>
